<template>
  <v-container>
    <v-layout row wrap>
      <v-flex xs10>
        <div class="parking-all-camera-panel">
          <v-window v-model="camdow" class="elevation-1" vertical>
            <v-window-item v-for="(key, i) in cameras" :key="i">
              <v-card>
                <v-container grid-list-sm fluid>
                  <v-card flat height="430">
                    <div>
                      <v-progress-circular
                        :size="70"
                        color="purple"
                        indeterminate
                        absolute
                        style="position: absolute; top: 30%; left: 45%;"
                        v-if="loading"
                      ></v-progress-circular>
                      <!-- <canvas :ref="key" class="pk-video-window"></canvas> -->
                      <img :ref="key" class="pk-video-window" v-else>
                    </div>
                    <v-btn
                      top
                      fab
                      float
                      absolute
                      small
                      @click="changeVideoStream(key)"
                      class="elevation-2"
                      color="blue"
                      flat
                      style="left: 95%;"
                    >
                      <v-icon>mdi-refresh</v-icon>
                    </v-btn>
                  </v-card>
                </v-container>
              </v-card>
            </v-window-item>
          </v-window>
        </div>
      </v-flex>

      <v-item-group
        v-model="camdow"
        class="shrink"
        tag="v-flex"
        mandatory
        style="margin-left: 5px;"
      >
        <div class="parking-all-camera-list">
          <div class="parking-all-camera-list-dilate">
            <v-item v-for="(key, i) in cameras" :key="i">
              <div slot-scope="{active, toggle}">
                <v-btn
                  :input-value="active"
                  @click="toggle();changeVideoStream(key)"
                  flat
                  :ripple="false"
                >摄像头-{{i}}</v-btn>
              </div>
            </v-item>
          </div>
        </div>
      </v-item-group>
    </v-layout>
  </v-container>
</template>

<script>
import { mapState } from "vuex";
import { log } from "util";
import { setTimeout } from "timers";

export default {
  name: "AllCamera",
  data() {
    return {
      camdow: 0,
      loading: false
    };
  },
  computed: {
    ...mapState("parkingmonitor", ["cameras"])
  },
  mounted() {
    ebus.$on("video_update", data => {
      this.loading = false;
      setTimeout(() => {
        let stage = this.$refs[data.no][0];
        stage.src = "data:image/png;base64," + data.frame;
      }, 500);

      // let ctx = canvas.getContext("2d");
      // let img = new Image();
      // img.src = "data:image/jpg;base64," + data.frame;
      // img.onload = () => {
      //   img.width = canvas.width;
      //   img.height = canvas.height;
      //   ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      // };
      // canvas.src = "data:image/jpg;base64," + data.frame;
    });

    this.loading = true;
    this.$socket.emit("video", JSON.stringify({ no: this.cameras[0] }));
  },

  methods: {
    changeVideoStream(key) {
      if (this.loading) return;
      this.loading = true;
      this.$socket.emit("video", JSON.stringify({ no: key }));
    }
  }
};
</script>

<style scoped>
.pk-video-window {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>


